<template>
  <u-popup :show="show" type="bottom" @close="closePop" :maskClick="false">

    <view class="time-picker-wrap" >
      <view class="select-btn-box" >
        <view class="cancel" @tap="closePop" >取消</view>
        <view class="confirm" @tap="confirm" >确认</view>
      </view>
      <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
          <picker-view-column>
              <view class="item" v-for="(item) in dates" :key="item">{{item}}</view>
          </picker-view-column>
          <picker-view-column>
              <template v-if="dayDate === date" >
                <view class="item" v-for="(item) in hours" :key="item">{{item}}点</view>
              </template>
              <template v-else >
                  <view class="item" v-for="(item) in hoursAsync" :key="item">{{item}}点</view>
              </template>
          </picker-view-column>
          <picker-view-column>
              <view class="item" v-for="(item) in minutes" :key="item">{{item}}分</view>
          </picker-view-column>
      </picker-view>
    </view>
  </u-popup>
</template>

<script>
  import uPopup from '@/basic-components/u-popup/index.vue';
  export default {
    components: {
      uPopup,
    },
    props: {
      show: {
        type: Boolean,
        default: false,
      },
    },
    data() {

      return {
        title: 'picker-view',
        dates: [],
        date: '',
        dayDate: '',
        dayDateTimes: [],
        dayTime: '',
        hours: [],
        hoursAsync: [],
        hour: '',
        minutes: ['00', '15', '30', '45'],
        minute: '00',
        day: '',
        value: [],
        // value: [9999, month - 1, day - 1],
        visible: true,
        indicatorStyle: `height: 50px;`
      }
    },
    mounted() {
      var nowDate = new Date();

      // 最近3天,4天时间
      if(nowDate.getHours() === 23) {
        this.dates = [this.getDay(1), this.getDay(2)];
        this.date = this.getDay(1);
        this.dayDate = this.getDay(1);

        // 标准日期格式
        this.dayDateTimes = [this.getDayTime(1), this.getDayTime(2)];
        this.dayTime = this.getDayTime(1);


        // 下一天
        for (let i = 0; i <= 23; i++) {

            this.hours.push(i)
        }
      }else {
        this.dates = [this.getDay(0), this.getDay(1), this.getDay(2)];
        this.date = this.getDay(0);
        this.dayDate = this.getDay(0);

        // 标准日期格式
        this.dayDateTimes = [this.getDayTime(0), this.getDayTime(1), this.getDayTime(2)];
        this.dayTime = this.getDayTime(0);

        // 整点，今日特殊
        for (let i = nowDate.getHours() + 1; i <= 23; i++) {

            this.hours.push(i)
        }
      }

      this.hour = this.hours[0];

      // 以后日
      for (let i = 0; i <= 23; i++) {

          this.hoursAsync.push(i)
      }
    },
    methods: {
      closePop() {
        this.$emit('update:show', false);
      },
      getDay(day){
          var today = new Date();
          var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
          today.setTime(targetday_milliseconds); //注意，这行是关键代码
          var tMonth = today.getMonth();
          var tDate = today.getDate();
          tMonth = this.doHandleMonth(tMonth + 1);
          tDate = this.doHandleMonth(tDate);
          return tMonth+"月"+tDate+"日";
      },
      getDayTime(day){
          var today = new Date();
          var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
          today.setTime(targetday_milliseconds); //注意，这行是关键代码
          var tYear = today.getFullYear();
          var tMonth = today.getMonth();
          var tDate = today.getDate();
          tMonth = this.doHandleMonth(tMonth + 1);
          tDate = this.doHandleMonth(tDate);
          return `${tYear}/${tMonth}/${tDate}`;
      },
      doHandleMonth(month){
          var m = month;
          if(month.toString().length == 1){
           m = "0" + month;
          }
          return m;
      },
      bindChange (e) {
          const val = e.detail.value;

          this.date = this.dates[val[0]];

          // 标准格式
          this.dayTime = this.dayDateTimes[val[0]];

          this.hour = val[0] >= 1 ? this.hoursAsync[val[1]] : this.hours[val[1]]
          this.minute = this.minutes[val[2]]
      },
      confirm() {
        this.$emit('update:show', false);
        this.$emit('listenConfirmTime', this.date + ' ' + this.hour + ':' + this.minute);
        
        // 标准日子格式
        let hour = this.hour;
            if(hour.toString().length == 1){
             hour = "0" + hour;
            }
        this.$emit('listenStandardDate', this.dayTime+' '+hour+':'+this.minute+':'+'00');
      }
    }

  }
</script>

<style lang="less" scoped >
  .select-btn-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EEEEEE;
    .cancel{
      padding: 20rpx 40rpx;
    }
    .confirm{
      padding: 20rpx 40rpx;
      color: green;
    }
  }
  .time-picker-wrap{
    background-color: #FFFFFF;
    .picker-view {
          width: 750rpx;
          height: 600rpx;
          margin-top: 20rpx;
      }
      .item {
          display: flex;
          height: 50px;
          align-items: center;
          justify-content: center;
          text-align: center;
      }
  }
</style>
